<template>
  <el-dialog :title="titles[0]" :visible.sync="giveUserDialog" :before-close="handleUserClose" custom-class="give-dialog" width="70%">
    <div class="give-content">
      <div class="give-left">
        <div class="give-search">
          <slot></slot>
        </div>
        <p class="give-title">{{titles[1]}}</p>
        <el-table stripe :data="data" border ref="giveLeftTable" v-loading="loading" @selection-change="handleUserChange" height="450">
          <el-table-column type="selection"></el-table-column>
          <el-table-column :prop="item.attr" :label="item.label" v-for="(item,index) in tableTitle" :key="index" :width="item.width"></el-table-column>
        </el-table>
      </div>
      <div class="give-center">
        <el-button type="primary" @click="toDistTable"><i class="el-icon-arrow-right"></i></el-button>
        <el-button type="primary" @click="toSearchTable"><i class="el-icon-arrow-left"></i></el-button>
      </div>
      <div class="give-right">
        <p class="give-title">{{titles[2]}}</p>
        <el-table stripe :data="distUsers" border ref="giveRightTable" @selection-change="handleSelectChange" height="530">
          <el-table-column type="selection"></el-table-column>
          <el-table-column :prop="item.attr" :label="item.label" v-for="(item,index) in tableTitle" :key="index" :width="item.width"></el-table-column>
        </el-table>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleUserClose">取 消</el-button>
      <el-button type="primary" @click="confirmGive">提 交</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props:{
    isShow:Boolean, // 弹窗显示状态
    loading:Boolean,// 表格数据加载状态
    // 标题依次为：弹窗标题、左边待选标题、右边已选标题
    titles:{
      type:Array,
      default:function(){
        return ['选择','可选择','已选择']
      }
    },
    tableTitle:Array,// 表格的配置项
    data:Array, // 待选的数据
    keyValue:String // 需要返回的字段
  },
  data(){
    return {
      giveCoupons:[],
      users:[],
      distUsers:[],
      disTmpUser:[],
      userList:this.data,
      giveUserDialog:this.isShow,
      givecondition:{},
      keyAttr:this.key?this.key:'id'
    }
  },
  methods: {
    handleUserClose(){
      this.giveUserDialog = false
    },
    handleUserChange(val){
      this.users = val
    },
    handleSelectChange(val){
      this.disTmpUser = val
    },
    toDistTable(){
      if(this.users.length){
        if(this.distUsers.length){
          // 数组去重，去掉已经选中的项
          var list2 = this.users,list1 = this.distUsers
          var result = list2.filter(function(coupon) {
              return list1.every(function(item) {
                return item[this.keyAttr] !== coupon[this.keyAttr]
              })
          })
          this.distUsers = list1.concat(result)
        }else{
          this.distUsers = this.users
        }
        this.users = []
        this.$refs.giveLeftTable.clearSelection()
      }
    },
    toSearchTable(){
      if(this.disTmpUser.length){
        var list2 = this.distUsers,list1 = this.disTmpUser
        var result = list2.filter(function(coupon) {
            return list1.every(function(item) {
              return item[this.keyAttr] !== coupon[this.keyAttr]
            })
        })
        this.distUsers = result
        this.$refs.giveRightTable.clearSelection()
      }
    },
    confirmGive(){
      if(this.distUsers.length){
        var tmp = []
        this.distUsers.map(item=>{
          tmp.push(item[this.keyAttr])
        })
        this.$emit('handleConfirm', tmp)
        this.handleUserClose()
      }else{
        this.$message({
          type: 'info',
          message: '请选择赠送优惠券的用户'
        });
      }
    }
  },
}
</script>

<style lang='less' scoped>
.give-content{
  display: flex;
  justify-content: space-between;
  .give-title{
    border-bottom: 1px solid #E3E3E3;
    padding-bottom: 10px;
    margin-bottom: 5px;
    text-align: left;
    font-size: 14px;
    font-weight: 300;
    color: #666666;
    position: relative;
    &::before{
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 88px;
      height: 1px;
      background: #49A8FF;
    }
  }
  .give-left{
    width: 45%;
    .give-search{
      text-align: left;
    }
  }
  .give-center{
    text-align: center;
    align-self: center;
    button{
      width: 108px;
      margin-left: 0;
      margin-top: 4px;
      &:first-child{
        margin-top: 0;
      }
    }
  }
  .give-right{
    width: 45%;
  }
}
</style>